<template>
	<div class="main">
	<el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
		<router-view></router-view>
	</el-config-provider>
  </div>
	<TuiImage />
  <ViewsJs :defaultImg="viewsJsReactive.images" :imgIndex="viewsJsReactive.imgIndex" :key="viewsJsReactive.viewsNum" ref="viewsJs" />

</template>

<script setup lang="ts">
import { reactive, computed , ref , nextTick , onBeforeUnmount } from "vue";
import { GlobalStore } from "@/stores";
import { useTheme } from "@/hooks/useTheme";
import { getBrowserLang } from "@/utils/util";
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import TuiImage from "@/components/TuiImage/index.vue";
import ViewsJs from "@/components/ViewsJs/index.vue";
import mittBus from "@/utils/mittBus";
// 使用主题
useTheme();

const globalStore = GlobalStore();

const viewsJs = ref<InstanceType<typeof ViewsJs>>();
// 配置element按钮文字中间是否有空格
const config = reactive({
	autoInsertSpace: false
});

// element 语言配置
const i18nLocale = computed(() => {
	if (globalStore.language && globalStore.language == "zh") return zhCn;
	if (globalStore.language == "en") return en;
	return getBrowserLang() == "zh" ? zhCn : en;
});

// 配置全局组件大小 (small/default(medium)/large)
const assemblySize = computed(
	(): EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never> | undefined =>
		globalStore.assemblySize as EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never> | undefined
);

mittBus.on("openImg", ({ imgArr, showIndex }) => {
	viewsJsReactive.images = imgArr;
	viewsJsReactive.viewsNum++;
	viewsJsReactive.imgIndex = showIndex;
	nextTick(() => viewsJs.value?.open());
});

onBeforeUnmount(()=>{
	mittBus.off("openImg");
});

const viewsJsReactive = reactive<{
	images:Array<{ title: string, url: string }>;
	imgIndex: number | undefined;
	viewsNum: number ;
}>({
	images:[],
	imgIndex:undefined,
	viewsNum:0
});

</script>

<style lang="scss">
 .main{
	 min-width: 1300px;
	 overflow-x: auto;
 }
// ::v-deep .el-switch__label--left{
// 	  display: flex;
// 		align-items: center;
// }
</style>
